<script>
import {
  deleteProject,
  getAimetaProjectList
} from "@/api/aihuman/IntelligentInteraction/IntelligentInteraction";
import {getUrl} from "@/util/aihuman/getUrl";

export default {
  name: "CloneModel",
  data() {
    return {
      list: [],
      searchForm: {},
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      statusMap: {
        1: '待审核',
        2: '审核中',
        3: '训练中',
        4: '训练成功',
        5: '已撤回'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getUrl,
    removeProject(item) {
      this.$confirm('确定要删除这条数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteProject({id: item.id}).then(res => {
          this.$message({
            type: 'success',
            message: res.data.msg
          })
          this.getList()
        });
      }).catch(() => {

      });
    },
    openView(item) {
      console.log(item);
      if (item.aimetaType === '1') {
        let a = document.createElement('a')
        a.target = '_blank'
        a.href = this.getUrl() + '/aihumanShow/index.html?id=' + item.id
        a.click()
      }
    },
    getList() {
      this.$nextTick(async () => {
        let params = {...this.page, projectType: 2, ...this.searchForm}
        const {data} = await getAimetaProjectList(params)
        this.page.total = data.data.total
        this.list = data.data.records
      })
    }
  }
}
</script>

<template>
  <div>
    <div class="project-items">
      <div class="project-box" v-for="item in list" :key="item.id">
        <div class="project-img">
          <div class="project-model">
            <el-button type="primary" @click="openView(item)">预览</el-button>
          </div>
          <div class="project-img-tags">{{ item.projectType === 1 ? '数字解说员' : '智能交互' }}</div>
          <img :src="getUrl() + item.previewImageUrl" alt="">
        </div>

        <div class="project-title">
          <div class="project-title__box">
            <strong>{{ item.projectName }}</strong>
            <button class="el-icon-edit">
            </button>
          </div>
          <div>
            <el-dropdown>
              <span class="el-icon-more"></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>详情</el-dropdown-item>
                <el-dropdown-item>修改</el-dropdown-item>
                <el-dropdown-item>撤回</el-dropdown-item>
                <el-dropdown-item @click.native="removeProject(item)">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div>创建时间：{{ item.createTime }}</div>
      </div>
    </div>

    <div class="pagination-box">

      <el-pagination
        background
        @size-change="getList"
        @current-change="getList"
        :current-page.sync="page.pageNo"
        :page-sizes="[9, 18, 36, 72]"
        :page-size.sync="page.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>
  </div>
</template>

<style scoped lang="scss">
.pagination-box {
  display: flex;
  justify-content: flex-end;
}

.project-model {
  background: rgba(0, 0, 0, .5);
  color: #fff;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
}

.project-img-tags {
  background: #ADB4C2;
  height: 35px;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  color: #fff;
}

.project-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;

  &__box {
    width: 80%;
    display: flex;
    justify-content: space-between;

    button {
      background: transparent;
      border: none;
      color: #cbbdbd;
    }
  }

  .el-icon-more {
    color: #999999;
  }

  strong {
    font-size: 18px;
  }
}

.project-img {
  height: 240px;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  position: relative;

  img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

.project-box {
  background: #fff;
  height: 330px;
  width: 370px;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  margin-right: 20px;
  margin-bottom: 20px;
  border: 1px solid #f0f0f0;

  &:last-child {
    margin-right: 0;
  }

  &:hover {
    box-shadow: 0 0 12px rgba(16, 29, 43, 0.2);

    .project-img-tags {
      background: #0B57D6;
    }

    .project-model {
      display: flex;
    }
  }
}


.project-items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>
